import React, {Component} from 'react';
import {View, StyleSheet, TextInput, Text} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import PropTypes from 'prop-types';

const styles = StyleSheet.create({
  container: {
    paddingBottom: 5,
    flex: 1,
  },
  linear: {
    height: 44,
    borderRadius: 22,
    padding: 2,
    shadowColor: 'rgba(255,105,201,0.50)',
    shadowOffset: {width: 2, height: 4},
    shadowOpacity: 0.8,
    flexDirection: 'row',
  },
  innerView: {
    borderRadius: 20,
    backgroundColor: 'white',
    position: 'relative',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft: 20,
    paddingRight: 20,
  },
  textinput: {
    marginLeft: 10,
    marginRight: 10,
    width: '100%',
  },
  suffix: {
    position: 'absolute',
    right: 10,
    color: '#7505F4',
    fontSize: 16,
  },
});

class LinerBoardTextInput extends Component {
  static propTypes = {
    placeholder: PropTypes.string.isRequired,
    onChangeText: PropTypes.func.isRequired,
    suffix: PropTypes.string,
    keyboardType: PropTypes.string,
    secureTextEntry: PropTypes.bool,
    editable: PropTypes.bool,
    value: PropTypes.string,
    linearStyle: PropTypes.object,
    multiline: PropTypes.bool,
    textInputStyle: PropTypes.object,
    value: PropTypes.string,
    defaultValue: PropTypes.string,
  };

  render() {
    const {
      placeholder,
      onChangeText,
      suffix,
      keyboardType,
      secureTextEntry,
      editable,
      value,
      linearStyle,
      multiline,
      textInputStyle,
      defaultValue,
    } = this.props;
    return (
      <View style={[styles.container]}>
        <LinearGradient
          start={{x: 0, y: 1}}
          end={{x: 1, y: 1}}
          colors={['#CE18EC', '#6601F5']}
          style={[styles.linear, linearStyle]}>
          <View style={styles.innerView}>
            <TextInput
              value={value !== undefined ? value : undefined}
              editable={editable !== undefined ? editable : true}
              keyboardType={keyboardType ? keyboardType : 'default'}
              placeholder={placeholder}
              placeholderTextColor={'#808080'}
              onChangeText={onChangeText}
              defaultValue={defaultValue}
              secureTextEntry={secureTextEntry}
              multiline={multiline !== undefined ? multiline : false}
              style={[styles.textinput, textInputStyle]}></TextInput>
            {suffix ? <Text style={styles.suffix}>{suffix}</Text> : null}
          </View>
        </LinearGradient>
      </View>
    );
  }
}

export {LinerBoardTextInput};
